<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>新增页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style>
            .selected_class{
                box-shadow: 3px 3px 6px rgba(85, 154, 227, 0.4);
                border: 2px solid #2d8cf0;
            }
            .ellipsis {
                overflow: hidden; /* 确保超出容器的文本被隐藏 */
                white-space: nowrap; /* 确保文本在一行内显示 */
                text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
            }
        </style>
    </head>
    <body>

        <form class="layui-form" action="">

            <div class="mainBox">
                <div class="main-container mr-5">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">方案名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">创作内容</label>
                        <div class="layui-input-block">
                            <div name="chapterid" id="chapterid" value=""></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">AI生图指令模板</label>
                        <div class="layui-input-block ai_image_command_html"  style="margin-right:10px;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                            <div class="font_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 10px;">
                                <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                                <div>实打实大苏打</div>
                            </div>
                        </div>
                        <input type="hidden" name="ai_image_command_id" value="" lay-verify="required">
                    </div>
                    <div class="layui-form-item" style="display: flex;flex-direction: row;">
                        <div style="display: flex;flex-direction: column;">
                            <label class="layui-form-label">AI图像指令</label>
                            <button type="button" class="pear-btn pear-btn-primary pear-btn-md edit_ai_image_command" style="width: 100px;">编辑指令</button>
                        </div>
                        <div style="width: 100%;margin-left: 5px;">
                            <input type="hidden" name="ai_image_command_data" />
                            <textarea name="ai_image_command" class="layui-textarea" rows="13" cols="100" disabled style="width: 100%"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">主播音色</label>
                        <div class="layui-input-block">
                            <div name="timbreid" id="timbreid" value=""></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">主播音量</label>
                        <div class="layui-input-block">
                            <input type="number" style="display:none" name="timbre_volume" value="10" />
                            <div id="timbre_volume" style="top:15px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">主播语速</label>
                        <div class="layui-input-block">
                            <input type="number" style="display:none" name="speak_speed" value="10" />
                            <div id="speak_speed" style="top:15px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">字幕样式</label>
                        <div class="layui-input-block font_html"  style="margin-right:10px;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                            <div class="font_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 10px;">
                                <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                                <div>实打实大苏打</div>
                            </div>
                        </div>
                        <input type="hidden" name="fontid" value=""  lay-verify="required">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">背景音乐</label>
                        <div class="layui-input-block">
                            <div name="musicid" id="musicid" value=""></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">音乐音量</label>
                        <div class="layui-input-block">
                            <input type="number" style="display:none" name="music_volume" value="5" />
                            <div id="music_volume" style="top:15px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">每段图像数</label>
                        <div class="layui-input-block">
                            <input type="number" name="ai_images_nums" value="1" placeholder=""  class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                        lay-filter="save">
                        提交
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        重置
                    </button>
                </div>
            </div>
            
        </form>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/functions.js"></script>
        <script src="/app/admin/admin/js/md5.js"></script>
        
        <script>

            // 相关接口
            const NOVEL_SN = layui.url().search["novel_sn"]??'';
            const CHAPTER_ID = layui.url().search["chapterid"]??'';
            const INSERT_API = "/app/admin/plan/index/insert";
            const AI_IMAGE_UPDATE_URL =  "/app/admin/plan/index/editaiimagecommand";

            layui.use(["form", "util", "popup","jquery", "xmSelect"], function () {
                // 字段 指令模板
                layui.$.ajax({
                    url: "/app/admin/image/aiimagecommand/select?status=1&limit=100",
                    dataType: "json",
                    async:true,
                    headers: get_header({"status":1}),
                    success: function (res2) {
                        let html = '';
                        layui.$.each(res2.data,function (i,v) {
                            let selected = '';
                            html += ' <div class="command_click '+selected+'" data-id="'+v.id+'" style="width: 100px;height: 120px;margin-right: 10px;">\n' +
                                '           <img src="'+v.image+'" style="width: 100px;height: 100px;">\n' +
                                '           <div class="ellipsis">'+v.name+'</div>\n' +
                                '  </div>';
                        })
                        layui.$('.ai_image_command_html').html(html);
                        if (res2.code) {
                            layui.popup.failure(res2.msg);
                        }
                    }
                });
                $('.ai_image_command_html').delegate('.command_click','click',function () {
                    $('.command_click').removeClass('selected_class');
                    $(this).addClass('selected_class');
                    $('input[name="ai_image_command_id"]').val($(this).data('id'));

                    let ai_image_command_id = $(this).data('id');
                    //console.log(ai_image_command_id);
                    layui.$.ajax({
                        url: "/app/admin/image/aiimagecommand/select?id="+ai_image_command_id,
                        dataType: "json",
                        async:true,
                        headers: get_header({"id":ai_image_command_id}),
                        success: function (res2) {
                            let jsonString = JSON.stringify(res2.data[0]);
                            layui.$('input[name="ai_image_command_data"]').val(encodeURIComponent(jsonString).replace(/ /g,'~'));
                            layui.$('textarea[name="ai_image_command"]').val(res2.data[0]['ai_image_command']);
                        }
                    });
                })

                layui.$('.edit_ai_image_command').click(function () {
                    let ai_image_command_id = layui.$('input[name="ai_image_command_id"]').val();
                    //console.log(ai_image_command_id)
                    if(ai_image_command_id==false){
                        return layer.msg('请选择AI生图指令模板,再编辑',{"icon":"2","time":2000});
                    }

                    layer.open({
                        type: 2,
                        title: "编辑AI图像指令",
                        shade: 0.1,
                        maxmin: true,
                        area: ["95%", "100%"],
                        content: AI_IMAGE_UPDATE_URL + "?id=" + ai_image_command_id
                    });
                })
            });

            layui.use(["form", "util", "popup"], function () {
                $ = layui.$;
                //todo 2 字体
                layui.$.ajax({
                    url: "/app/admin/font/index/select?status=1&limit=1000&lang=中文",
                    dataType: "json",
                    async:true,
                    headers: get_header({"status":"1","lang":"中文"}),
                    success: function (res) {
                        let html = '';

                        layui.$.each(res.data,function (i,v) {
                            let selected = '';
                            // if(i==0){
                            //     selected = 'selected_class';
                            //     $('.input[name="modelid"]').val(v.id);
                            // }
                            html += ' <div class="font_click '+selected+'" data-id="'+v.id+'" style="width: 100px;height: 62px;margin-right: 10px;">\n' +
                                '           <img src="'+v.icon+'" style="width: 100px;height: 42px;">\n' +
                                '           <div class="ellipsis">'+v.name+'</div>\n' +
                                '  </div>';
                        })
                        layui.$('.font_html').html(html);
                        if (res.code) {
                            layui.popup.failure(res.msg);
                        }
                    }
                });
                $('.font_html').delegate('.font_click','click',function () {
                    $('.font_click').removeClass('selected_class');
                    $(this).addClass('selected_class');
                    $('input[name="fontid"]').val($(this).data('id'));
                    //console.log($(this).data('id'));
                })
            });

            layui.use(["jquery", "slider"], function(){
                var slider = layui.slider;

                //主播音量
                slider.render({
                    elem: '#timbre_volume',  //绑定元素
                    min:1,
                    max:100,
                    step:1,
                    value:10,
                    tips:true,
                    theme:"#2d8cf0",
                    input:true,
                    change: function(value){
                        layui.$('input[name="timbre_volume"]').val(value);
                        //console.log(value) //动态获取滑块数值
                        //do something
                   }
                });
                //主播语速
                slider.render({
                    elem: '#speak_speed',  //绑定元素
                    min:8,
                    max:15,
                    step:1,
                    value:10,
                    tips:true,
                    theme:"#2d8cf0",
                    input:true,
                    change: function(value){
                        layui.$('input[name="speak_speed"]').val(value);
                        //console.log(value) //动态获取滑块数值
                        //do something
                    }
                });
                //音乐音量
                slider.render({
                    elem: '#music_volume',  //绑定元素
                    min:1,
                    max:100,
                    step:1,
                    value:10,
                    tips:true,
                    theme:"#2d8cf0",
                    input:true,
                    change: function(value){
                        layui.$('input[name="music_volume"]').val(value);
                        //console.log(value) //动态获取滑块数值
                        //do something
                    }
                });
            });

            // 字段 创作内容 chapterid
            layui.use(["jquery", "xmSelect", "popup"], function() {
                layui.$.ajax({
                    url: "/app/admin/novel/chapter/select?format=select&limit=8000&spread_type[]=<&spread_type[]=3&novel_sn="+NOVEL_SN+"&id="+CHAPTER_ID,
                    dataType: "json",
                    async:true,
                    headers: get_header({"format":"select","novel_sn":NOVEL_SN,"id":CHAPTER_ID,"spread_type":'array'}),
                    success: function (res) {
                        let initValue = CHAPTER_ID ? CHAPTER_ID.split(",") : [];
                        layui.xmSelect.render({
                            el: "#chapterid",
                            name: "chapterid",
                            filterable: true,
                            data: res.data,
                            initValue: initValue,
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                        })
                        if (res.code) {
                            layui.popup.failure(res.msg);
                        }
                    }
                });
            });

            //音色
            layui.use(["jquery", "xmSelect", "popup"], function() {
                layui.$.ajax({
                    url: "/app/admin/timbre/index/select?format=tree&spread_type=1",
                    dataType: "json",
                    headers: get_header({'format':"tree","spread_type":"1"}),
                    success: function (res) {
                        // let value = layui.$("#pid").attr("value");
                        // let initValue = value ? value.split(",") : [];
                        layui.xmSelect.render({
                            el: "#timbreid",
                            name: "timbreid",
                            //initValue: initValue,
                            tips: "请选择",
                            //toolbar: {show: true, list: ["CLEAR"]},
                            data: res.data,
                            value: "0",
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                            filterable: true,
                            tree: {show: true,"strict":false,"clickCheck":true,"clickExpand":true},
                        });
                        if (res.code) {
                            return layui.popup.failure(res.msg);
                        }
                    }
                });
            });

            // 字段 背景音乐 musicid
            layui.use(["jquery", "xmSelect", "popup"], function() {
                layui.$.ajax({
                    url: "/app/admin/music/index/select?format=select&limit=1000&spread_type=1",
                    dataType: "json",
                    async:true,
                    headers: get_header({"format":"select","spread_type":'1'}),
                    success: function (res) {
                        layui.xmSelect.render({
                            el: "#musicid",
                            name: "musicid",
                            filterable: true,
                            data: res.data,
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                        })
                        if (res.code) {
                            layui.popup.failure(res.msg);
                        }
                    }
                });
            });

            //提交事件
            layui.use(["form", "popup"], function () {
                layui.form.on("submit(save)", function (data) {
                    if(data.field.modelid==false){
                        layui.popup.failure('模型风格必选');
                        return false;
                    }
                    if(data.field.chapterid==false){
                        layui.popup.failure('创作内容必选');
                        return false;
                    }
                    if(data.field.timbreid==false){
                        layui.popup.failure('主播音色必选');
                        return false;
                    }
                    if(data.field.musicid==false){
                        data.field.musicid = 0;
                    }
                    if(data.field.fontid==false){
                        layui.popup.failure('字体必选');
                        return false;
                    }
                    data.field['novel_sn'] = layui.url().search['novel_sn'];
                    let loading = layer.load();
                    layui.$.ajax({
                        url: INSERT_API,
                        type: "POST",
                        dateType: "json",
                        data: data.field,
                        async:true,
                        headers: get_header(data.field),
                        success: function (res) {
                            layer.close(loading);
                            if (res.code) {
                                return layui.popup.failure(res.msg);
                            }
                            return layui.popup.success("操作成功", function () {
                                parent.refreshTable();
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        }
                    });
                    return false;
                });
            });

        </script>

    </body>
</html>
